<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>热门 - 美拍</title>
    <script src="https://cdn.staticfile.org/Base64/1.0.2/base64.min.js"></script>
    <script src="https://cdn.staticfile.org/urljs/2.3.1/url.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
    <script src="js/meipaiParser.js"></script>
    <style>
        ::-webkit-scrollbar { display: none; }
        html, body, #view { margin: 0px; padding: 0px; width: 100%; height: 100%; flex: 6 }
        .tool{ display: flex; width: 100%; align-items:center; justify-content: space-around; }
        .view { display: flex; align-items:center; justify-content:center; width:100%; }
        .video{ max-width: 80%; max-height: 100%; height: 80%; }
        .list{ text-align: center; line-height: 0; }
        .item{ width: 100px; flex: 1; border:0.5px dashed sandybrown }
    </style>
</head>

<body>
    
    <div style="display: flex; width: 100%; height: 100%;">
        <div style="flex: 4; width:100%;">
            <div id="view" class="view">
                <video id="video" class="video" autoplay></video>
            </div>
        </div>
        <div style="flex: 1; width:100%;">
            <div class="tool">
                <input id="perv" type="button" value="上一页"><input id="next" type="button" value="下一页">
            </div>
            <div id="list" class="list"></div>
        </div>
    </div>
    <script type="text/javascript">
      // 代理ajax
      function proxyAjax(url, data, callback) {
        $.ajax({
          url:'http://192.168.2.94:8081/api/post',
          type:'POST',
          contentType: "application/json; charset=utf-8;",
          data: data,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Proxy", url);
          },
          success:function(result,textStatus,jqXHR){
            if(textStatus==="success"){
              typeof callback=="function" ? callback(result) : null;
            }else{
              console.error("接口访问失败", result, textStatus, jqXHR);
            }
          },
          error:function(result,textStatus,jqXHR){
            console.error("代理服务器访问失败", result, textStatus, jqXHR);
          }
        });
      }
      // 初始配置
      var query = {
        page: 1, //页号
        count: 12, //分页大小
        tid: 474, //类型ID
        maxid: null,
        single_column: 1 //是否有水印
      };
      // 加载数据
      function load(query){
          var path = "home/hot_timeline"||"squares/new_timeline";
          // https://www.meipai.com/squares/new_timeline?page=4&count=24&tid=63&maxid=1139556924
          // https://www.meipai.com/squares/new_timeline?page=2&count=24&tid=474&single_column=1 // 最新高颜值无水印
          proxyAjax(`https://www.meipai.com/${path}?${Url.stringify(query)}`, null, function (re) {
            var medias = re ? re.medias : [];
            var $list = $("#list").html(null);
            medias.map(function (e) {
              var src = meipaiParser.decodeMp4.decode(e.video);
              var $item = $(`<img class="item" src="${e.convert_cover_pic||e.cover_pic}!thumb320" data-video=${src}></img>`);
              $item.on("click", function () {
                  $("#video").attr("poster", $(this).attr("src")).attr("src", $(this).data("video"));
              });
              $list.append($item);
            });
            console.log(medias);
            var m = medias.pop();
            query.maxid =m.id||null;
          });
      }
      $("body").ready(function () {
        load(query);
        $("#perv").on("click",function(){
          query.page = query.page>0 ? query.page-1 : 0;
          load(query);
        });
        $("#next").on("click",function(){
          query.page = query.page+1;
          load(query);
        });
      });
    </script>
</body>

</html>